<tbody>
<tr> 
	<td><h3>Liste des familles de services</h3></td>
</tr>
<tr>    
    <!-- Feedback message zone -->
	<td><div id="message"></div></td>
</tr>
<tr>    
    <td><div id="tablecontent">
    	<table class="testgrid">
    	</table>
    </div></td>
</tr>
</tbody>

<script src="../EditableGrid/editablegrid.js"></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_renderers.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_editors.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_validators.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_utils.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_charts.js" ></script>
		<link rel="stylesheet" href="../EditableGrid/editablegrid.css" type="text/css" media="screen">
		
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>
        
<script>
		// helper function to get path of a demo image
			function image(relativePath) {
				return "images/" + relativePath;
			}

			window.onload = function() {

				// this approach is interesting if you need to dynamically create data in Javascript 
				var metadata = [];
				metadata.push({ name: "code_famille", label: "Code Famille", datatype: "string", editable: false});
				metadata.push({ name: "libelle_famille", label:"Nom Famille", datatype: "string", editable: true});
				metadata.push({ name: "description", label:"Description", datatype: "string", editable: true});
				metadata.push({ name: "commentaire", label: "Commentaire", datatype: "string", editable: true});
				metadata.push({ name: "code_prestation", label: "Code Prestation", datatype: "string", editable: true});
				metadata[4].values = {};
				// Itération Prestation 
				<?php foreach ( $enum_prestation as $prestation ) {?>
					<?php echo 'metadata[4].values["'.$prestation['code_prestation'].'"] = {"'.$prestation['code_prestation'].'":"'.$prestation['code_prestation'].'-'.$prestation['libelle_prestation'].'"};';?>
					
			   	<?php } ?>
				metadata.push({ name:"action", label:"", datatype:"html", bar:true, editable:false, values:null});

				var data = [];
				<?php $i=1 ; ?>
			    <?php foreach ( $listeFamilles as $famille ) {?>
					data.push({id: <?php echo $i ?>,
					 values: {"code_famille":"<?php echo htmlentities($famille['code_famille'], ENT_QUOTES,"UTF-8") ?>",
					 "libelle_famille":"<?php echo $famille['libelle_famille'] ?>",
					 "description":"<?php echo $famille['description'] ?>",
					 "commentaire":"<?php echo $famille['commentaire'] ?>",
					 "code_prestation":"<?php echo $famille['code_prestation'] ?>",
					 "action":""}});
					 <?php $i=$i+1 ; ?>
   				<?php } ?>
				
		editableGrid = new EditableGrid("DemoGrid", {
				// called when the XML has been fully loaded 
			tableLoaded: function() { 

				// display a message
				_$("message").innerHTML = "<p class='ok'>Ready!</p>";
				// render the grid
				this.renderGrid("tablecontent", "testgrid");
			
			},				
			// Function de modification d'une valeur 
			modelChanged: function(rowIdx, colIdx, oldValue, newValue, row) {
						
			columnName = this.getColumnName(colIdx);
			code_famille = this.getValueAt(rowIdx, editableGrid.getColumnIndex("code_famille"));
					
			_$("message").innerHTML = "<p class='ok'>New value is '" + newValue + "'</p>";
			window.location = "espace_administration.php?onglet=administration&page=gestion_famille&action=modification&updateId="+code_famille+"&attribute="+columnName+"&value="+newValue;
			}
		});
		
		editableGrid.load({"metadata": metadata, "data": data});	
		
		
		// CellRenderer pour suppression d'un valeur
		editableGrid.setCellRenderer("action", new CellRenderer({render: function(cell, value) {
			// this action will remove the row, so first find the ID of the row containing this cell 
			code_famille = editableGrid.getValueAt(cell.rowIndex, editableGrid.getColumnIndex("code_famille"));

cell.innerHTML = "<a onclick=\"if (confirm('Etes vous sur de vouloir supprimer cette famille de service ? ')) { editableGrid.remove(" + cell.rowIndex + "); window.location.href='espace_administration.php?onglet=administration&page=gestion_famille&action=suppression&delId="+code_famille +"';} \" style=\"cursor:pointer\">" +
			 "<img src=\"" + image("delete.png") + "\" border=\"0\" alt=\"supprimer\" title=\"Supprimer famille de service\"/></a>"; 		}})); 
									
		editableGrid.renderGrid("tablecontent", "testgrid");	
		} 
</script>